<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<body>
<div th:insert="~{common/header::header2}"></div>
<div class="container-fluid">
    <div class="row">
        <div th:insert="~{common/menu::menu}" class="col-md-2"></div>
        <div class="col-md-10">
            <ul class="breadcrumb">
                <li><a th:href="@{/main.do}">后台主页</a></li>
                <li>用户数据管理</li>
                <li>用户管理</li>
            </ul>
            <div class="col-sm-4">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="添加用户">
                    <i class="glyphicon glyphicon-plus"></i>
                </button>
                <!--            <a th:style="'color:white'" th:href="@{/toAddUser}"><button class="btn btn-sm btn-success">添加用户</button></a>-->
            </div>
            <!--<div class="col-sm-10">
                <form th:action="@{/queryUser}" method="post">
                    <div class="input-group mb-3">
                            <input type="text" name="loginName" placeholder="Search By LoginName">
                            <input type="text" name="email" placeholder="Search By Email" aria-describedby="button-addon">
                        <div class="input-group-append">
                            <button class="btn btn-sm btn-primary" type="submit" id="button-addon" >搜索</button>
                        </div>
                    </div>
                </form>
            </div>-->
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col">登录名</th>
                    <th scope="col">姓名</th>
                    <th scope="col">密码</th>
                    <th scope="col">手机号码</th>
                    <th scope="col">邮箱</th>
                    <th scope="col">权限</th>
                    <th scope="col">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="user:${pageInfo.list}">
                    <td th:text="${user.getLoginName()}"></td>
                    <td th:text="${user.getUserName()}"></td>
                    <td th:text="${user.getPassword()}"></td>
                    <td th:text="${user.getPhone()}"></td>
                    <td th:text="${user.getEmail()}"></td>
                    <td th:if="${user.getRole() eq 1}" th:text="管理员"></td>
                    <td th:text="普通用户" th:if="${user.getRole} eq 0"></td>
                    <td>
                        <a style="color: white" th:href="@{/user-info/toUpdate.do(id=${user.getUserId()})}"><button class="btn btn-sm btn-primary">编辑</button></a>
                        <a style="color: white" th:href="@{/user-info/deleteUser(id=${user.getUserId()})}"><button class="btn btn-sm btn-danger">删除</button></a>
                    </td>
                </tr>
                </tbody>
            </table>
            <nav aria-label="Page navigation example">
                <ul class="pagination">
                    <li class="page-item"><a class="page-link" th:href="@{/user-info/show.do(pn=)}">首页</a></li>
                    <li class="page-item" th:if="${pageInfo.hasPreviousPage}">
                        <a class="page-link" th:href="@{/user-info/show.do(pn=${pageInfo.pageNum - 1})}">Previous</a>
                    </li>
                    <li th:each="pageNum:${pageInfo.navigatepageNums}">
                        <a th:if="${pageNum==pageInfo.pageNum}" class="page-link" th:href="@{#}" th:text="${pageNum}"></a>
                        <a th:if="${pageNum!=pageInfo.pageNum}" class="page-link" th:href="@{/user-info/show.do(pn=${pageNum})}" th:text="${pageNum}"></a>
                    </li>
                    <li class="page-item" th:if="${pageInfo.hasNextPage}">
                        <a class="page-link" th:href="@{/user-info/show.do(pn=${pageInfo.pageNum+1})}">Next</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" th:href="@{/user-info/show.do(pn=${pageInfo.pages})}">尾页</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<!-- 弹出框 -->
<div class="modal fade" id="exampleModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
            </div>
            <div class="modal-body ">
                <div align="center">
                    <span style="color:red;"></span>
                    <form name="articleform" class="form-horizontal" th:action="@{/user-info/add.do}" onsubmit="return checkForm(this)">
                    <div class="form-group row justify-content-sm-center">
                        <label for="loginName" class="col-sm-2 col-form-label font-weight-bolder">登录名</label>
                        <div class="col-sm-5">
                            <input type="text"  class="form-control" id="loginName" name="loginName" onblur="checkLoginName(this)">
                        </div>
                        <div class="col-sm-3">
                            <span id="loginNameErr"></span>
                        </div>
                    </div>
                    <div class="form-group row justify-content-sm-center">
                        <label for="userName" class="col-sm-2 col-form-label font-weight-bolder">姓名</label>
                        <div class="col-sm-5">
                            <input type="text"  class="form-control" id="userName" name="userName" onblur="checkUserName()">
                        </div>
                        <div class="col-sm-3">
                            <span id="userNameErr"></span>
                        </div>
                    </div>
                    <div class="form-group row justify-content-sm-center">
                        <label for="inputPassword" class="col-sm-2 col-form-label font-weight-bold">密码</label>
                        <div class="col-sm-5">
                            <input type="password" class="form-control" id="inputPassword" name="password" onblur="checkPassword()">
                        </div>
                        <div class="col-sm-3">
                            <span id="pwdErr"></span>
                        </div>
                    </div>
                    <!--<div class="form-group row justify-content-sm-center">
                        <label class="col-sm-2 col-form-label font-weight-bolder">性别</label>
                        <div id="sex" class="col-sm-5">
                            <label for="boy">男:</label>
                            <input id="boy" name="sex" value="1" type="radio" checked="checked">
                            <label for="girl">女:</label>
                            <input id="girl" name="sex" value="0" type="radio" checked="checked">
                        </div>
                    </div>-->
                    <div class="form-group row justify-content-sm-center">
                        <label for="phone" class="col-sm-2 col-form-label font-weight-bolder">联系电话</label>
                        <div class="col-sm-5">
                            <input type="text" class="form-control" id="phone" name="phone" onblur="checkPhone()">
                        </div>
                        <div class="col-sm-3">
                            <span id="phoneErr"></span>
                        </div>
                    </div>
                    <div class="form-group row justify-content-sm-center">
                        <label for="email" class="col-sm-2 col-form-label font-weight-bold">电子邮箱</label>
                        <div class="col-sm-5">
                            <input type="email" class="form-control" id="email"  name="email" onblur="checkEmail()">
                        </div>
                        <div class="col-sm-3">
                            <span id="emailErr"></span>
                        </div>
                    </div>
                    <table>
                        <tr>
                            <td><input type="submit" class="btn btn-success btn-sm" value="提交" id="btn-submit"/></td>
                            <td>&nbsp;&nbsp;<input type="button" class="btn btn-danger btn-sm" data-dismiss="modal" value="取消" /></td>
                        </tr>
                    </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script th:inline="javascript">
    let u = [[${#request.getContextPath()}]];
    function validateLoginName(obj) {
        $.ajax({
            type: "POST",
            url: u+"/user-info/validateLoginName",
            data: "loginName=" + $(obj).val(),
            success: function (msg) {
                if (msg !=="") {
                    $("#loginNameErr").html(msg);
                    obj.val("");
                    return false;
                } else {
                    $("#loginNameErr").html("");
                    return true;
                }
            },
            error: function () {
                alert("出现异常");
            }
        });
    }
    // 验证登录名
    function checkLoginName(obj) {
        let loginName = $("#loginName");
        let errname = $("#loginNameErr");
        let pattern = /^\w{5,}$/;
        if (loginName.val().length === 0) {
            errname.html("登录名不能为空");
            return false;
        }
        if (!pattern.test(loginName.val())) {
            errname.html("登录名称至少五位");
            return false;
        }
        if (validateLoginName(obj)){

        }
        else {
            errname.html("");
            return true;
        }

    }
    function checkUserName() {
        let name = $("#userName");
        let errName = $("#userNameErr");
        if (name.val().length === 0) {
            errName.html("姓名不能为空");
            return false;
        } else {
            console.log("2")
            errName.html("");
            return true;
        }
    }
    //验证密码
    function checkPassword(){
        var userpasswd = $("#inputPassword");
        var errPasswd = $("#pwdErr");
        var pattern = /^\w{4,16}$/; //密码要在4-16位
        if (userpasswd.val().length === 0) {
            errPasswd.html("密码不能为空");
            return false;
        }
        if(!pattern.test(userpasswd.val())){
            errPasswd.html("密码要在4-16位");
            return false;
        }
        else{
            errPasswd.html("");
            return true;
        }
    }
    //验证手机号
    function checkPhone(){
        var userphone = $("#phone");
        var phoneErr = $("#phoneErr");
        var pattern = /^1[34578]\d{9}$/; //验证手机号正则表达式
        if (userphone.val().length === 0) {
            phoneErr.html("手机号码不能为空");
            return false;
        }
        if(!pattern.test(userphone.val())){
            phoneErr.html("手机号码不合规范");
            return false;
        }
        else{
            phoneErr.html("");
            return true;
        }
    }
    //验证邮箱
    function  checkEmail() {
        var useremail = $("#email");
        var emailErr = $("#emailErr");
        var pattern =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;//邮箱验证正则表达式
        if (useremail.val().length === 0) {
            emailErr.html("邮箱不能为空");
            return false;
        }
        if(!pattern.test(useremail.val()))
        {
            emailErr.html("邮箱不符合规范");
            return false;
        }
        else{
            emailErr.html("");
            return true;
        }
    }
    function checkForm(obj) {
        let loginName = checkLoginName(obj);
        let name = checkUserName();
        let password = checkPassword();
        let email = checkEmail();
        let phone = checkPhone();
        let result = loginName && name && password  && email && phone;
        return result;
        alert(result);
    }
</script>
</html>